Bootstrap4によってボタンやフォームに適用されるスタイルを無効化する方法

どうも！大阪オフィスの西村祐二です。

WEBサイトの画面やWEBの管理画面を作るときにBootstrap4をよく使います。

使い方としては、メインにガッツリというよりか補助的な役割で使う機会が多くなってきました。

特にCSSを書かずに、marginやpaddingの調整、やポジションの調整が簡単にできるのでとても重宝しています。

ただ、しょうがないのですがついてほしくないところにCSSのスタイルが適用されてしまうことがあります。

例をあげてみます。画像に映るアイコンはボタンタグで作成したアイコンでクリックすることができます。アイコンをクリックした後に、アイコンの周りに青い枠線のスタイルが適用されていることがわかります。すごい違和感ですよね。

なので、今回、Bootstrap4によって適用されるスタイルを無効化する方法について記載したいと思います。

方法

さっそく結論ですが、下記をCSSファイルに記載することで無効化することができます。

他のスタイルに影響を与える可能性がありますので、使用する際は十分に確認、検証を行ってください。

• ボタン

noneとすることで無効化することができます。強制的に反映させるため!importantを指定しています。

*:focus {
  outline: none !important;
}

• フォーム

box-shadow以外にも水色のborder-colorなどが設定されているのですが、個人的に気にならなかったのでそのままです。気になる人はborder-colorも変更するといいかもしれません。

*:focus {
 box-shadow:none !important;
}

目的のスタイルの探し方

今回、ボタンとフォームについて紹介しましたが、他にも無効化したいスタイルが出てくるかもしれません。

ただ、画面をみただけだと、どんなスタイルが設定されているのかわからず無効化したくてもできないことがあるかと思いますので、スタイルの探し方を紹介したいと思います。

私の場合はChromeのデベロッパーツールを使います。右クリックし、検証をクリックすると表示されます。そこで、下記操作をしてスタイルを探しています。

• ①：矢印のアイコンをクリックする

• ②：無効化したいところの画面をクリックする

• ③：「:hov」をクリックする

• ④：いろんな状態を試し、目的のスタイルが適用されている状態にする

• ⑤：無効化したいスタイルを探す

さいごに

いかがだったでしょうか。

Bootstrap4によってボタンやフォームに適用されるスタイルを無効化する方法を紹介してみました。また、対象のスタイルを探す方法もあわせてご紹介させていただきました。

誰かの参考になれば幸いです。